<template>
  <div>
    <div class="remote-dialog-search-div">
      <font-awesome-icon
        style="margin-right: 20px"
        icon="search"
        size="lg"
      />
      <el-input
        style="width: 250px;margin-right: 20px"
        size="small"
        v-model="info"
      />
      <el-button
        @click="handleRemoteTableSearch"
        type="primary"
        size="mini"
      >
        <!--查询按钮-->
        {{ $t('message.home.remoteDeviceTable.search.searchButton') }}
        <el-popover
          placement="bottom-start"
          width="200"
          trigger="hover"
          :content="$t('message.home.remoteDeviceTable.search.searchPrompt')"
        >
          <font-awesome-icon
            slot="reference"
            style="vertical-align: top"
            :icon="['far', 'question-circle']"
          />
        </el-popover>
      </el-button>
    </div>
    <el-table
      @sort-change="handleCuListSort"
      height="700px"
      class="table-gutter-background"
      header-cell-class-name="my-table-header-cell my-table-header-cell-nopadding"
      cell-class-name="my-table-cell"
      :data="data"
    >
      <!--终端编号-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col1')"
        sortable="custom"
        prop="device"
        min-width="160px"
      >
        <template slot-scope="scope">
          <font-awesome-icon
            v-if="!scope.row.collected"
            @click="handleCuCollection(scope.$index, scope.row.id)"
            style="color: #5098ef;cursor: pointer"
            :icon="['far', 'star']"
          />
          <font-awesome-icon
            v-else
            @click="handleCuCollectionCancel(scope.$index, scope.row.id)"
            style="color: #5098ef;cursor: pointer"
            :icon="['fas', 'star']"
          />
          <span style="margin-left: 5px">
            {{ scope.row.device }}
          </span>
        </template>
      </el-table-column>
      <!--地球站名称-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.colDialog1')"
        prop="station_name"
        min-width="110px"
      />
      <!--状态-->
      <el-table-column
        min-width="150px"
        :label="$t('message.home.remoteDeviceTable.col2')"
        prop="statename"
        :filters="[{ text: $t('message.define.cu.state.0'), value: $t('message.define.cu.state.0') }, { text: $t('message.define.cu.state.1'), value: $t('message.define.cu.state.1') }, { text: $t('message.define.cu.state.2'), value: $t('message.define.cu.state.2') }]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <font-awesome-icon
            :style="{color: scope.row.color}"
            icon="circle"
          />
          <span style="margin-left: 5px">
            {{ scope.row.statename }}
          </span>
        </template>
      </el-table-column>
      <!--省份-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.colDialog6')"
        prop="city"
        min-width="115px"
      />
      <!--坐标-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col3')"
        prop="coords"
        min-width="195px"
      >
        <template slot-scope="scope">
          <div class="remote-table-snr-cell">
            <span>{{ scope.row.coords }}</span>
            <el-button
              type="text"
              style="padding: 0 15px 0 0"
              @click="handleStationCoordsModify(scope.row)"
            >
              <img
                style="width: 1em;margin-left: 5px"
                src="@/assets/common/edit.png"
              >
            </el-button>
          </div>
        </template>
      </el-table-column>
      <!--电话号码-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col4')"
        prop="number"
      />
      <!--终端类型-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.col5')"
        prop="unit_type"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ $t('message.define.cu.unit_type')[scope.row.unit_type] }}</span>
        </template>
      </el-table-column>
      <!--TDM信噪比-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.colDialog4')"
        prop="snr1"
        min-width="155px"
      >
        <template slot-scope="scope">
          <div class="remote-table-snr-cell">
            <span>{{ scope.row.snr1 }}</span>
            <el-button
              class="refresh-button"
              style="padding: 0 15px 0 0;"
              type="text"
              @click="handleSnrRefresh(scope.row)"
            >
              <font-awesome-icon
                icon="sync-alt"
              />
            </el-button>
          </div>
        </template>
      </el-table-column>
      <!--业务信噪比-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.colDialog5')"
        prop="snr2"
        min-width="170px"
      >
        <template slot-scope="scope">
          <div class="remote-table-snr-cell">
            <span>{{ scope.row.snr2 }}</span>
            <el-button
              type="text"
              style="padding: 0 15px 0 0"
              @click="handleSnrRefresh(scope.row)"
            >
              <font-awesome-icon
                class="refresh-button"
                icon="sync-alt"
              />
            </el-button>
          </div>
        </template>
      </el-table-column>
      <!--发送频点-->
      <el-table-column
        :label="$t('message.home.remoteDeviceTable.colDialog2')"
        prop="sendFreqFormat"
        min-width="150px"
      />
      <!--接收频点-->
      <!--<el-table-column-->
      <!--  :label="$t('message.home.remoteDeviceTable.colDialog3')"-->
      <!--  prop="receiveFreq"-->
      <!--  min-width="150px"-->
      <!--/>-->
      <!--操作-->
      <el-table-column
        fixed="right"
        min-width="220px"
        :label="$t('message.home.remoteDeviceTable.col6')"
      >
        <template slot-scope="scope">
          <el-button-group>
            <!--退网-->
            <el-button
              :disabled="scope.row.state === 0"
              style="padding: 5px"
              @click.stop="controlRemoteCu(scope.row, 'logout')"
              type="primary"
              size="mini"
            >
              {{ $t('message.home.remoteDeviceTable.button1') }}
            </el-button>
            <!--入网-->
            <el-button
              :disabled="scope.row.state === 0"
              style="padding: 5px"
              @click.stop="controlRemoteCu(scope.row, 'relogin')"
              type="primary"
              size="mini"
            >
              {{ $t('message.home.remoteDeviceTable.button2') }}
            </el-button>
            <!--建链-->
            <!--<el-button-->
            <!--  :disabled="scope.row.state === 0"-->
            <!--  style="padding: 5px"-->
            <!--  @click.stop="handleCuCallBridge(scope.row)"-->
            <!--  type="primary"-->
            <!--  size="mini"-->
            <!--&gt;-->
            <!--  {{ $t('message.home.remoteDeviceTable.button3') }}-->
            <!--</el-button>-->
            <!--拆链-->
            <!--<el-button-->
            <!--  :disabled="scope.row.state === 0"-->
            <!--  style="padding: 5px"-->
            <!--  @click.stop="handleCuCallBridgeEnd(scope.row)"-->
            <!--  type="primary"-->
            <!--  size="mini"-->
            <!--&gt;-->
            <!--  {{ $t('message.home.remoteDeviceTable.button4') }}-->
            <!--</el-button>-->
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSearchCuSizeChange"
      @current-change="handleSearchCuPageChange"
      class="pagination-position"
      background
      :page-sizes="[10, 20, 50]"
      :page-size="remoteCuTablePagination.pageSize"
      layout="total, sizes, prev, pager, next"
      :total="remoteCuTablePagination.total"
    />
  </div>
</template>

<script>
export default {
  name: 'CuTable',

  props: {
    data: {
      type: Array,
      default: function () {
        return []
      }
    }
  },

  computed: {
    remoteCuTablePagination () {
      return {
        ...this.pagination,
        total: this.$store.state.cu.cuCount
      }
    }
  },

  data () {
    return {
      ordering: 'device',
      pagination: {
        page: 1,
        pageSize: 10
      },

      info: ''
    }
  },

  methods: {
    // culist的分页
    async getCuList () {
      let self = this
      try {
        self.cuSearchConfig.loading = true
        await self.$store.dispatch(`getCuList`, {
          ordering: self.cuSearchConfig.ordering,

          page: self.cuSearchConfig.page,
          pageSize: self.cuSearchConfig.pageSize,

          info: self.cuSearchConfig.info
        })
      } finally {
        self.cuSearchConfig.loading = false
      }
    },
    handleRemoteTableSearch () {
      let self = this
      self.cuSearchConfig.page = 1
      self.getCuList()
    },
    handleSnrRefresh (row) {
      let self = this
      self.$store.dispatch(`axios`, {
        method: 'get',
        url: `/api/abs/ncp/cu_snr/${row.id}/`
      })
    },
    handleCuCollection (index, id) {
      
      let self = this
      // 缓存中的收藏cu的ID
      let cuIdList = JSON.parse(localStorage.getItem('cuIdList')) || []
      if (cuIdList.find(item => item === id)) {
        // 该终端已收藏，无法重复添加
        self.$message.error(self.$t('message.home.cuCollection.message.err1'))
        return
      }
      cuIdList.push(id)
      localStorage.setItem('cuIdList', JSON.stringify(cuIdList))
      self.$message.success(self.$t('message.common.info.addSuccess'))
      // set culist的collect属性
      self.$store.commit('setCuListCollected', {
        index: index,
        collected: true
      })
      // 重新读取首页的culist
      self.$store.dispatch('getCollectionCuList', cuIdList)
    },
    async handleCuCollectionCancel (index, id) {
      
      let self = this
      try {
        // 确定要取消收藏
        await self.$confirm(self.$t('message.home.cuCollection.message.confirm1'), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      // 缓存中的收藏cu的ID
      let cuIdList = JSON.parse(localStorage.getItem('cuIdList')) || []
      for (let key in cuIdList) {
        if (cuIdList[key] === id) {
          cuIdList.splice(key, 1)
        }
      }
      localStorage.setItem('cuIdList', JSON.stringify(cuIdList))
      self.$message.success(self.$t('message.common.info.deleteSuccess'))
      self.$store.commit('setCuListCollected', {
        index: index,
        collected: false
      })
      // 重新读取首页的culist
      self.$store.dispatch('getCollectionCuList', cuIdList)
    },
    // 修改地球站经纬度
    handleStationCoordsModify (row) {
      let self = this
      self.station.form.id = row.station
      self.station.form.station_name = row.station_name
      self.station.form.longitude = row.longitude
      self.station.form.latitude = row.latitude
      self.station.visible = true
    },
    handleCuListSort ({ prop, order }) {
      let self = this
      self.cuSearchConfig.ordering = `${order === 'descending' ? '-' : ''}${prop}`
      self.getCuList()
    },
    handleSearchCuSizeChange (size) {
      let self = this
      self.cuSearchConfig.pageSize = size
      self.cuSearchConfig.page = 1
      self.getCuList()
    },
    handleSearchCuPageChange (page) {
      let self = this
      self.cuSearchConfig.page = page
      self.getCuList()
    },
    // table的标签过滤方法
    filterTag (value, row) {
      return row.statename === value
    }
  }
}
</script>

<style scoped lang="scss">
  .remote-dialog-search-div{
    margin: 10px 0;
    text-align: left;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .remote-table-snr-cell{
    display: flex;
    justify-content: space-between;
    flex-flow: nowrap;
    align-items: center;
    .refresh-button{
      display: none;
    }
  }
  .remote-table-snr-cell:hover{
    .refresh-button{
      display: inline-block;
    }
  }
</style>
